<!-- RemarkRenderer.vue -->
<script setup lang="ts">
import type { Remark } from "@/common/type/parser"
import { computed } from "vue"

const _props = defineProps<{
  remarks: Remark[]
}>()

const getStyle = computed(() => (remark: Remark) => {
  const x = remark.pcX
  const y = remark.pcY

  return {
    left: `${x}px`,
    top: `${y}px`,
    zIndex: remark.zIndex,
    transform: "scaleX" in remark
      ? `scale(${remark.scaleX}, ${remark.scaleY})`
      : undefined,
    width: "width" in remark ? `${remark.width}px` : undefined,
    height: "height" in remark ? `${remark.height}px` : undefined
  }
})
</script>

<template>
  <div class="remarks-container">
    <div
      v-for="remark in remarks"
      :key="remark.id"
      class="remark" :class="[`position-${remark.position}`]"
      :style="getStyle(remark)"
    >
      <template v-if="remark.type === 'text'">
        <span :style="{ color: remark.color }">{{ remark.content }}</span>
      </template>

      <img
        v-else-if="remark.type === 'image'"
        :src="remark.src"
        alt="remark-image"
      >

      <div
        v-else-if="remark.type === 'effect'"
        class="effect"
        :data-effect-id="remark.effectId"
      />

      <hr v-else-if="remark.type === 'line'" class="remark-line">
    </div>
  </div>
</template>

<style scoped>
.remarks-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.remark {
  position: absolute;
}

.position-middle {
  transform: translate(-50%, -50%);
}

.position-top {
  top: 0;
}

.position-bottom {
  bottom: 0;
}

.position-frame {
  pointer-events: none;
}

.effect {
  /* 这里可以添加特效的通用样式 */
}

.remark-line {
  border: 1px solid #666;
  width: 100%;
  margin: 8px 0;
}
</style>
